<template>
  <div class="foot">
    <div class="foot-box">
      <div v-for="(v, i) in foot" :key="i" >
        <router-link :to="{ name: v.name }">
          <div class="footicon">
            <i class="iconfont" :class="v.icon"></i>
            <span>{{ v.txt }}</span>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  methods: {},
  data() {
    return {
      foot: [
        {
          txt: "首页",
          name: "home",
          path: "/main/home",
          icon: "icon-shangdian",
        },
        {
          txt: "分类",
          name: "list",
          path: "/main/list",
          icon: "icon-leimupinleifenleileibie",
        },
        {
          txt: "活动专区",
          name: "gift",
          path: "/main/gift",
          icon: "icon-liwu-copy",
        },
        {
          txt: "购物车",
          name: "cart",
          path: "/main/cart",
          icon: "icon-gouwuche",
        },
        { txt: "我的", name: "mine", path: "/main/mine", icon: "icon-wode" },
      ],
    };
  },
};
</script>

<style lang="scss" >
.foot-box {
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 0;
  height: 60px;
  background-color: #fff;
  justify-content: space-around;
  align-items: center;
  font-size: 12px;
  color: #646566;
  .footicon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // color: #333333;
    .iconfont {
      font-size: 24px;

    }
  
  }
}
a {
  color: #333333;
}
 .router-link-exact-active,
.router-link-active {
  color:#f5bd82 !important; 

 
}
 


</style>